<template>
  <div>
    <main-header></main-header>
    <div class="article-list-show" v-loading.fullscreen.lock="loading"></div>
    <div style="background-color: #F5F6F7">

      <div class="main-page">
        <!-- 左边 -->
        <div class="main-left">
          <!-- 个人页面 -->
          <div class="main-info">
            <div style="text-align: center;">
              <el-avatar :size="150" :src="UserInfo.avatar"></el-avatar>
              <div style="margin: 10px;">
                <el-button type="warning" plain size="mini">私信</el-button>
                <el-button type="danger" plain size="mini">关注</el-button>
              </div>
            </div>

            <div style="flex: 1;display: flex;flex-direction: column;align-items: center;">
              <span style="font-size: 26px;flex: 1;">{{UserInfo.username}}</span>
              <div style="margin: 0px 10px 0 50px;flex: 1;color: #999999;">
                个人介绍：
                {{UserInfo.personIntro}}
              </div>
            </div>
          </div>

          <!-- 文章列表 -->
          <div style="margin: 5px 20px;">
            <el-tabs v-model="activeName"  @tab-click="handleClick">
             <el-tab-pane label="全部" name="all">
                <!-- <main-article :ArticleList="this.ArticleList" ></main-article> -->
              </el-tab-pane>
              <el-tab-pane :label="item.catalog" :name="item.id" v-for="item in this.catalog" :key="item.id">
              </el-tab-pane>
            </el-tabs>
            <main-article :ArticleList="this.ArticleList" ></main-article>
          </div>
          <!-- <div style="height: 50px;background-color:  #F5F6F7;font-size: 26px;text-align: left;line-height: 50px;color: #CA0C16;padding-left: 40px;">博文:28篇</div> -->
        </div>

          <!-- 右边 -->
        <div class="main-right">
          <!-- 粉丝+关注 -->
          <div class="fans-num">
            <!-- 粉丝 -->
            <div style="border-right: 1px solid #DCDFE6;">
              <span>18</span>
              <span>他的粉丝</span>
            </div>
            <!-- 关注 -->
            <div>
              <span>29</span>
              <span>他的关注</span>
            </div>
          </div>
          <!-- 广告 -->
          <main-advertis></main-advertis>
        </div>
      </div>
    </div>
    <main-footer></main-footer>
  </div>
</template>

<script>
  import MainHeader from '../common/header.vue'
  import MainFooter from '../common/footer.vue'
  import MainAdvertis from '../common/advertis.vue'
  import MainArticle from './mainArticleList.vue'

  import ArticleApi from '@/api/Article.js'
  import UserApi from '@/api/user.js'
  export default{
    data(){
      return{
        ArticleList:[],
        activeName: 'all',
        UserInfo:[],
        catalog:[],
        loading:true
      }
    },
    components:{
      MainHeader,
      MainAdvertis,
      MainFooter,
      MainArticle
    },
    created() {
      UserApi.getInfoById(this.$route.params.id).then(res => {
        this.UserInfo = res.data
      })


      ArticleApi.getArticleCatalog(this.$route.params.id).then(res => {
        this.catalog = res.data
      })


      UserApi.getAllArticle(this.$route.params.id).then(res => {
        this.ArticleList = res.data
        this.loading = false
      })
    },
    methods:{
      handleClick(tab, event) {
        // console.log(tab, event);
        // alert(tab.paneName)
        this.loading =true
        if(tab.paneName != 'all'){
          ArticleApi.getCatalogArticle(this.$route.params.id,tab.paneName).then(res =>{
            this.ArticleList = res.data
            this.loading = false
          })
        }else{
          UserApi.getAllArticle(this.$route.params.id).then(res => {
            this.ArticleList = res.data
            this.loading = false
          })
        }
      }
    }
  }
</script>

<style scoped="scoped">
  .main-page{
    display: flex;
    justify-content: space-between;
    width: 70%;
    margin: 0 auto;
  }
  .main-left{
    flex: 3;
    margin: 5px 5px;
    width: 100%;
    background-color: #FFFFFF;
  }
  .main-info{
    padding:  25px;
    width: 95%;
    /* height: 100px; */
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #E4E7ED;
  }
  .main-right{
    flex: 1;
    margin: 0 10px;
  }

  .fans-num{
    display: flex;
    width: 100%;
    height: 80px;
    text-align: center;
    justify-content: space-between;
    border: 1px solid #F2F6FC;
  }
  .fans-num div{
    flex: 1;
    margin: 5px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #FFFFFF;
  }

  .fans-num div span:nth-child(1){
    margin-bottom: 3px;
    font-size: 18px;
  }
  .fans-num div span:nth-child(2){
    font-size: 14px;
  }

  .main-catalog{
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-content: flex-start;
    text-align: center;
  }

  .main-catalog li{
    width: 50%;
    height: 45px;
    line-height: 45px;
    background-color: #FFFFFF;
  }

  .main-catalog li:hover{
    background-color: #f44444;
  }
</style>
